<template>
  <div class="app">
    <Header :title="title"/>
    <main class="main-content">
      <VideoSection />
      <Carousel :pic-list="picList"/>
    </main>
    <Footer :contact-list="contactList" :friendship-link-list="friendshipLinkList" :copyright-list="copyrightList"/>
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import VideoSection from '@/components/VideoSection.vue'
import Carousel from '@/components/Carousel.vue'
import Footer from '@/components/Footer.vue'

import {FrontApi} from "@/api/front";
// 在此进行初始数据的渲染工作
import {ref, onMounted, onUnmounted} from 'vue'


const title = ref()

const contactList = ref([]);

// 友情链接
const friendshipLinkList = ref([]);

// 版权
const copyrightList = ref([]);

// 轮播图
const picList = ref([]);




// 对数据进行分类，分别赋值
const sortData = async () => {

  // 轮播图渲染
  const res1 = await FrontApi.getPicList();
  if (res1) {
    picList.value = res1.data;
  }


  // 页面数据配置渲染
  const res3 = await FrontApi.getDicValue();
  if (res3) {
    let map = res3.data;

    // 标题
    title.value = map.title[0].dicName;
    // friendshipLinkList
    friendshipLinkList.value = map.friendship_link;

    // 版权
    copyrightList.value = map.copyright;

    // 联系我们
    contactList.value = map.contact;

  }

}
onMounted(() => {
  sortData();
})

</script>

<style scoped>
.app {
  padding-top: 50px;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
</style>
